<template>
  <div>
    <el-row :gutter="30">
      <el-col :span="8" style="border-right:1px solid #dcdfe6;height:400px">
        <el-input
          placeholder="输入部门名称"
          size="small" style="margin-bottom:30px;margin-top:10px"
          @keyup.enter.native="searchTreeData"
          v-model="treeSearchInputValue"
          clearable>
        </el-input>
        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" empty-text="暂无数据"
                 :default-expanded-keys="defaultExpandedKeys" highlight-current lazy :load="loadChildren"
                 node-key="id"></el-tree>
      </el-col>
      <el-col :span="16">
        <div style="margin-top:1px">
          <h4>已选部门</h4>
          <div v-if="selectItem.length==0" style="text-align: center">暂无数据</div>
          <el-tag
            v-else
            style="margin-right:5px;margin-bottom:10px"
            v-for="item in selectItem"
            :key="item.id"
            closable
            @close="closeItem(item)">
            {{item.label}}
          </el-tag>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss">

</style>

<script>
  export default {
    name: 'LemonEDialogTree',
    props: {
      listTreeMethod: Function,
      multiple: Boolean
    },
    data() {
      return {
        treeData: [],
        defaultExpandedKeys: [],
        treeSearchInputValue: '',
        treeSearchParam: {
          name: '',
          code: ''
        },
        defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf: 'leaf'
        },
        selectItem: []
      }
    },
    methods: {
      listTreeData() {
        this.listTreeMethod(this.treeSearchParam, (res) => {
          this.treeData = res
          for (var td of res) {
            this.defaultExpandedKeys.push(td.id)
          }
        }, () => {
        })
      },
      loadChildren(node, resolve) {
        if (node.level === 0) {
          return resolve(this.treeData)
        }
        this.treeSearchParam = {}
        this.treeSearchParam.parentId = node.data.id
        this.listTreeMethod(this.treeSearchParam, (res) => {
          resolve(res)
        }, () => {
        })
      },
      handleNodeClick(data) {
        if (this.selectItem.length > 0 && !this.multiple) {
          this.$message({
            type: 'warning',
            message: '只能选择一个!'
          })
          return
        }

        for (var si of this.selectItem) {
          if (si.id === data.id) {
            this.$message({
              type: 'warning',
              message: '请勿重复选择!'
            })
            return
          }
        }
        this.selectItem.push(data)
      },
      searchTreeData() {
        this.treeSearchParam = {}
        if (this.treeSearchInputValue == '') {
          this.treeSearchParam.parentId = ''
        } else {
          this.treeSearchParam.name = this.treeSearchInputValue
        }
        this.listTreeData()
      },
      closeItem(item) {
        let index = 0
        for (var si of this.selectItem) {
          if (si.id === item.id) {
            this.selectItem.splice(index, 1)
            break
          }
          index++
        }
      }
    }
  }
</script>
